import { Table } from "antd";
import { Link, useSearchParams } from "react-router-dom";
import React, { useCallback, useEffect, useMemo, useState } from "react";

const TablePage: React.FC = () => {
  const [dataSources, setDataSources] = useState<
    { key: number; value: string }[]
  >([]);

  const assignDataSources = useCallback(() => {
    let index = 0;
    const sources = [];
    while (index != 50) {
      sources.push({ key: index, value: index + "a" });
      index++;
    }
    setDataSources(sources);
  }, []);

  const columns = useMemo(
    () => [
      {
        dataIndex: "key",
        title: "Key",
      },
      {
        dataIndex: "value",
        title: "Value",
      },
      {
        title: "Action",
        // @ts-ignore
        render: (_, { key }) => <Link to={`/detail/${key}`}>check</Link>,
      },
    ],
    []
  );

  useEffect(() => {
    assignDataSources();
  }, []);

  const [searchParams, setSearchParams] = useSearchParams();

  const defaultCurrent = useMemo(
    () => Number(searchParams.get("current") || 1),
    []
  );

  return (
    <Table
      dataSource={dataSources}
      columns={columns}
      pagination={{
        defaultCurrent,
        onChange: (current) => setSearchParams({ current: current.toString() }),
      }}
    ></Table>
  );
};

export default TablePage;
